<template>
  <div class="car-number-keyboard" v-if="show">
    <div class="keyboard">
      <div class="row" v-for="(rows, rowIndex) in keyboard" :key="rowIndex">
        <div v-for="(col, index) in rows" :key="index">
          <span v-if="col.disabled" class="col disabled">{{ col.value }}</span>
          <span v-else-if="col.empty" class="col empty">{{ col.value }}</span>
          <div v-else-if="col.backspace" class="col backspace" @click="deleteM">
            删除
          </div>
          <span v-else class="col" @click="clickTap(col)">{{ col }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    keyboardType: {
      type: Number,
      default: 1
    },
    ind: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      keyboard: [],

      show: false,

      provinces: [
        ["京", "津", "沪", "渝", "苏", "浙", " 豫", "粤", "川", "陕"],
        ["冀", "辽", "吉", "皖", "闽", "鄂", "湘", "鲁", "晋", "黑"],
        ["赣", "贵", "甘 ", "桂", "琼", "云", "青", "蒙", "藏", "宁"],
        [
          "新",
          "使",
          "领",
          "警",
          "港",
          "澳",
          "台",
          "学",
          {
            value: "",
            backspace: true
          }
        ]
      ],

      nomals: [
        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
        ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
        [
          "L",
          "M",
          "N",
          {
            value: "O",
            disabled: true
          },
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U"
        ],
        [
          "V",
          "W",
          "S",
          "Y",
          "Z",
          "学",
          {
            value: "澳",
            disabled: true
          },
          {
            value: "港",
            disabled: true
          },
          {
            value: "",
            backspace: true
          }
        ]
      ],

      ecos: [
        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
        ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
        [
          "L",
          "M",
          "N",
          {
            value: "O",
            disabled: true
          },
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U"
        ],
        [
          "V",
          "W",
          "S",
          "Y",
          "Z",
          {
            value: "学",
            disabled: true
          },
          {
            value: "澳",
            disabled: true
          },
          {
            value: "港",
            disabled: true
          },
          {
            value: "",
            backspace: true
          }
        ]
      ]
    };
  },
  watch: {
    keyboardType: function(nval, oval) {
      console.log(nval, oval);
      this.change(this.keyboardType);
    }
  },
  mounted() {
    this.change(this.keyboardType);
  },
  methods: {
    deleteM() {
      this.$emit("delete", { ind: this.ind });
    },
    change(keyboardType) {
      console.log(keyboardType)
      switch (parseInt(keyboardType)) {
        case 1:
          this.keyboard = this.provinces;
          console.log(this.keyboard, "keyboard");
          break;
        case 2:
          this.keyboard = this.nomals;
          break;
        case 3:
          this.keyboard = this.ecos;
          break;
      }
    },
    clickTap(key) {
      this.$emit("clickChild", { key, ind: this.ind });
    }
  }
};
</script>
<style lang="scss" scoped>
.car-number-keyboard {
  padding-bottom: 1rem;
}
.keyboard {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
}

.keyboard .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.keyboard .row:last-child {
  margin-bottom: 0;
}

.keyboard .row .col {
  width: 2.0313rem;
  height: 2.625rem;
  line-height: 2.625rem;
  text-align: center;
  background-color: #ffffff;
  border-radius: 0.3125rem;
  margin-right: 0.4688rem;
  font-size: 0.9375rem;
  box-shadow: 0.0625rem 0.1875rem 0.1563rem #888888;
  color: #000;
  padding: 0.325rem;
}

.keyboard .row .col:last-child {
  margin-right: 0;
}

.keyboard .row .col:active {
  box-shadow: 0rem 0rem 0rem #888888;
}

.keyboard .row .col.disabled {
  color: #c6c6c8;
}

.keyboard .row .col.empty {
  background-color: transparent;
  box-shadow: unset;
}

.keyboard .row .col.backspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.0625rem;
}

.keyboard .row .col.backspace .icon {
  width: 1.3125rem;
  height: 0.875rem;
}
</style>
